<template>
  <div class="add-address">
    <div class="add-address__contain">
      <input class="add-address__contain__input1"
             name="姓名"
             placeholder="收货人姓名"
             v-model="params.recipients"
             v-validate="'required|max:15'">
      <input placeholder="手机号"
             v-model="params.cellphone"
             name="手机号"
             v-validate="'required|mobile'">
      <div class="add-address__contain__input-area">
        <address-picker :defaultValue="paramValue"
                        :showRight="false"
                        :defaultStyle="{'font-size': '0.3rem','color': '#000000'}"></address-picker>
      </div>
      <div class="add-address__contain__diving"></div>
      <textarea placeholder="请输入街道名称、街道号"
                v-model="params.adress"
                name="详细地址"
                v-validate="'required|min:5|max:150'" />
      <div class="add-address__contain__default-address"
           v-on:click="setCheckedImage()">
        <img src="@image/icon-checked.png"
             v-if="isChecked">
        <img src="@image/icon-unchecked.png"
             v-if="!isChecked"> 设为默认地址
      </div>

    </div>
    <div class="add-address__save">
      <button v-on:click="save(errors)"
              class="btn__n"
              :disabled="InfoIsEmpty || !btnIsClick">保存</button>
    </div>
  </div>
</template>

<script>

import addressPicker from '@/components/address-line'
import inputValidate from '@/mixins/input'
import mixins from '@/mixins'
export default {
  name: 'add-address',
  mixins: [inputValidate, mixins],
  data () {
    return {
      // 选择省市区 需要的参数
      paramValue: {
        provincename: '', // 省
        cityname: '', // 区
        areaname: '' // 市
      },
      isChecked: false, // “设为默认地址” 按钮状态
      // 网络请求需要的参数
      params: {
        addid: '',
        recipients: '',
        cellphone: '',
        province: '',
        city: '',
        area: '',
        adress: '',
        flag: ''
      },
      // 按钮是否可点击，true可点击，false不可点击
      btnIsClick: true
    }
  },
  watch: {
    paramValue: {
      deep: true,
      handler (val) {
        // 选择省市区 发生变化
        this.params.province = val.provincename
        this.params.city = val.cityname
        this.params.area = val.areaname
      }
    }
  },
  computed: {
    InfoIsEmpty () {
      // 是否都不是无效的只要有一个是空的就是true
      let isAllNoInvilate = false
      for (let objs in this.params) {
        if (objs === 'flag' || objs === 'addid') {
          continue
        }
        if ((!this.params[objs]) || (this.params[objs] && this.params[objs].trim().length === 0)) {
          isAllNoInvilate = true
        }
      }
      return isAllNoInvilate
    }
  },
  methods: {
    // “设置默认地址”按钮
    setCheckedImage: function () {
      this.isChecked = !this.isChecked
    },
    // 保存 按钮点击
    save: async function (errors) {
      try {
        this.btnIsClick = false
        // 检测是否输入的数据 合法
        if (this.validateErrors(errors)) {
          return
        }
        this.params.province = this.paramValue.provincename
        this.params.city = this.paramValue.cityname
        this.params.area = this.paramValue.areaname
        this.params.flag = this.isChecked ? '0' : '1'
        let ret = await this.$ajax.post('/address/save.json', {
          ...this.params
        })
        this.params.addid = ret.result
        if (this.$route.query.isAdd === true || this.$route.query.isAdd === 'true') {
          this.$toast('地址新增成功')
        } else {
          this.$toast('修改成功')
        }
        this.$router.back()
      } catch (err) {
        console.error(err)
      } finally {
        this.btnIsClick = true
      }
    },
    // 修改收货地址，赋值
    modifyAddress (item) {
      this.params.addid = item.addid
      this.params.recipients = item.recipients
      this.params.cellphone = item.cellphone
      this.params.province = item.province
      this.params.city = item.city
      this.params.area = item.area
      this.params.adress = item.adress
      this.params.flag = item.flag === '0'

      this.isChecked = item.flag === '0'
      this.paramValue.provincename = item.province
      this.paramValue.cityname = item.city
      this.paramValue.areaname = item.area
    }
  },
  mounted () {
    let isAdd = this.$route.query.isAdd
    if (isAdd === true || isAdd === 'true') {
      // 新增收货地址
    } else {
      let item = this.$cache.getCache(this.$cache.keys.addressItem)
      item = JSON.parse(item)
      // 修改收货地址
      this.modifyAddress(item)
    }
  },
  destroyed () {
    this.$cache.removeCache(this.$cache.keys.addressItem)
  },
  components: {
    addressPicker
  }
}
</script>
<style lang="stylus" scoped>
.add-address {
  background: #f8f8f8;
  height: 100vh;
  position: relative;

  .add-address__contain {
    padding-top: 20px;
    background: white;
    display: flex;
    flex-direction: column;

    input {
      // width: 100%;
      margin-left: 32px;
      font-size: 30px;
      margin-right: 32px;
      height: 91px;
      border: none;
      box-sizing: border-box;
      border-bottom: 1px solid RGBA(217, 217, 217, 1);
      font-family: PingFangSC-Regular !important;
    }

    // input:nth-child(2) {
    // }
    .add-address__contain__diving {
      height: 1px;
      background: RGBA(217, 217, 217, 1);
      margin-left: 32px;
      margin-right: 32px;
      display: flex;
      box-sizing: border-box;
    }

    .add-address__contain__input-area {
      background: white;
      padding-left: 30px;
      padding-right: 32px;
      font-size: 30px;
      height: 80px;
      padding-top: 18px;
      padding-bottom: 20px;
      box-sizing: border-box;
    }

    .add-address__contain__area {
      background: white;
      padding-left: 32px;
      padding-right: 32px;
      font-size: 30px;
      height: 80px;
      padding-top: 18px;
      padding-bottom: 20px;
      box-sizing: border-box;
    }

    .add-address__contain__default-address {
      background: white;
      padding-left: 32px;
      padding-right: 32px;
      font-size: 30px;
      height: 159px;
      padding-top: 18px;
      padding-bottom: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
      box-sizing: border-box;
    }

    textarea {
      height: 160px;
      // width: 100%;
      resize: none;
      margin-left: 32px;
      font-size: 30px;
      margin-right: 32px;
      padding-top: 8px;
      background: white;
      box-sizing: border-box;
      border: none;
      border-bottom: 1px solid RGBA(217, 217, 217, 1);
      font-family: PingFangSC-Regular !important;
    }

    img {
      width: 30px;
      height: 30px;
      margin-right: 17px;
    }
  }

  .add-address__save {
    text-align: center;
    margin-top: 60px;

    button {
      font-size: 34px;
    }
  }
}
</style>
